<style lang="scss" scoped>

@import 'src/style/mixin';
.confirmOrderContainer {
    padding-top: 1.95rem;
    padding-bottom: 3rem;
    p,
    span {
        font-family: Helvetica Neue, Tahoma, Arial;
    }
}

.food_list {
    background-color: #fff;
    margin-top: .4rem;
    header {
        padding: .7rem;
        border-bottom: 0.025rem solid #f5f5f5;
        img {
            @include wh(1.2rem, 1.2rem);
            vertical-align: middle;
        }
        span {
            @include sc(.8rem, #333);
        }
    }
    .food_list_ul {
        padding-top: .5rem;
    }
    .food_item{
      border-bottom: 0.025rem solid #f5f5f5;
    }
    .food_item_style {
        @include fj;
        line-height: 1.8rem;
        padding: 0 .7rem;
        span,
        p {
            @include sc(.65rem, #666);
        }
        .food_name {
            width: 11rem;
        }
        .num_price {
            flex: 1;
            @include fj;
            align-items: center;
            span:nth-of-type(1) {
                color: #f60;
            }
        }
    }
    .total_price {
        border-top: 0.025rem solid #f5f5f5;
    }
}
.pay_way{
        .header_style{
            @include fj;
            line-height: 2rem;
            span:nth-of-type(1){
                @include sc(.7rem, #666);
            }
            .more_type{
                span:nth-of-type(1){
                    @include sc(.6rem, #aaa);
                    width: 10rem;
                    display: inline-block;
                    text-align: right;
                    vertical-align: middle;
                }
                svg{
                    @include wh(.5rem, .5rem);
                    fill: #ccc;
                }
            }
        }
        .hongbo{
            @include fj;
            border-top: 0.025rem solid #f5f5f5;
            span{
                @include sc(.6rem, #aaa);
                line-height: 2rem;
                svg{
                    @include wh(.5rem, .5rem);
                    vertical-align: middle;
                    fill: #ccc;
                }
            }
            span:nth-of-type(2){
                color: #aaa;
            }
        }
        .support_is_available{
            span{
                color: #666;
            }
        }
    }
    .container_style{
        background-color: #fff;
        margin-top: .4rem;
        padding: 0 .7rem;
    }
    .confrim_order{
        display: flex;
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 2rem;
        p{
            line-height: 2rem;
            @include sc(.75rem, #fff);
        }
        p:nth-of-type(1){
            background-color: #3c3c3c;
            flex: 5;
            padding-left: .7rem;
        }
        p:nth-of-type(2){
            flex: 2;
            background-color: #56d176;
            text-align: center;
        }
    }
    .food_item_taste{
      @include sc(.5rem, #333);
      padding: 0 0.7rem 0.6rem;
      .taste-t{
          @include sc(0.5rem, #c00);
      }
    }

</style>

<template lang="html">

<div class="confirmOrderContainer">
    <head-top head-title="确认订单" goBack="true"></head-top>
    <section class="food_list">
        <header>
            <span>{{shopId}}号桌</span>
        </header>
        <ul class="food_list_ul">
            <li v-for="(item,index) in checkoutData" :key="item.id" class="food_item">
                <div class="food_item_style">
                  <p class="food_name ellipsis">{{item.name}}</p>
                  <div class="num_price">
                      <span>x {{item.quantity}}</span>
                      <span>¥{{item.price}}</span>
                  </div>
                </div>
                <div class="food_item_taste">
                  <span class="taste-t">口味:</span ><span v-for="(list,tasteIndex) in item.tasteList" v-if="list.choosed==true" :key="tasteIndex">{{list.name}}、</span>
                </div>
            </li>
        </ul>
        <div class="food_item_style total_price">
            <p class="food_name ellipsis">订单 ¥{{totalPrice}}</p>
            <div class="num_price">
                <span>待支付 ¥{{totalPrice}}</span>
            </div>
        </div>
            <section class="confrim_order">
                <p>待支付 ¥{{totalPrice}}</p>
                <p @click="confrimOrder">确认下单</p>
            </section>
    </section>
    <transition name="router-slid" mode="out-in">
        <router-view></router-view>
    </transition>
</div>

</template>

<script>
import qs from 'qs';
import axios from 'axios';
import {
    mapState, mapMutations
}
from 'vuex'

import {
  setStore, getStore
}
from '../../config/mUtils.js'

import headTop from '../../components/header/head'
export default {
    components: {
        headTop
    },
    data() {
        return {
            status:null,
            shopId: null, //桌号
            checkoutData: null, //数据返回值
            shopCart: null, //购物车数据
            totalPrice: 0, //总共价格
        }
    },
    computed: {
        ...mapState([
            'cartList','remarkText'
        ]),
    },
    created() {
        //获取上个页面传递过来的shopid值
        this.shopId = this.$route.query.shopId
        this.status = this.$route.query.status
        this.INIT_BUYCART();
        this.SAVE_SHOPID(this.shopId);
        //获取当前商铺购物车信息
        this.shopCart = this.cartList[this.shopId];
        this.initData();
    },
    mounted() {

    },
    methods: {
        ...mapMutations([
                'INIT_BUYCART', 'SAVE_SHOPID', 'SAVE_CART_ID_SIG'
            ]),
            // //初始化数据
            initData() {
                this.totalPrice = 0;
                let newArr = new Array;
                 Object.values(this.shopCart).forEach(foodItem => {
                    Object.values(foodItem).forEach(item => {
                        // console.log(item)
                        this.totalPrice += item.num * item.price;
                         newArr.push({
                            attrs: [],
                            extra: {},
                            id: item.id,
                            name: item.name,
                            price: item.price,
                            quantity: item.num,
                            tasteList:item.tasteList
                        })
                    })
                })
                 this.checkoutData = newArr
                //  console.log(this.checkoutData)
            },
            //确认订单
            async confrimOrder(){





              let mealOrderFoods = []
              this.checkoutData.forEach((val,index)=>{

                let food_taste=[]
                if(val.tasteList){
                  val.tasteList.forEach((v)=>{
                      if(v.choosed==true){
                        food_taste.push(v.name)
                      }
                  })
                }

                let mealOrderFood={
                  "food_id":val.id,
                  "num":val.quantity,
                  "food_taste":food_taste.join(''),
                  "remark":''
                }
                mealOrderFoods.push(mealOrderFood)
              })

              // console.log(mealOrderFoods)
              // console.log(JSON.stringify(mealOrderFoods))


              let statusType = ''
              !this.status?statusType='new':statusType='add'
              let datas = {
                "desk_shop_id":this.shopId,
                "person_num":'0',
                "total_money":this.totalPrice,
                "user_id":'',
                "dis_count_money":this.totalPrice,
                "pay_type":'1',
                "real_money":this.totalPrice,
                "extra":'',
                "mealOrderFoods":JSON.stringify(mealOrderFoods),
                "type":statusType//new确认菜单，add加菜，del减菜
              }
console.log(datas)
                    this.$http.post(this.HttpUrl.UrlConfig.updateMealOrderByDeskId, qs.stringify(datas))
                        .then(res => {
                            res = res.data
                            console.log(res)
                            if(res == '下单成功'){
                              delete this.cartList[this.shopId]
                              setStore('buyCart', this.cartList)
                              this.$router.push('/order?shopId='+this.shopId)
                            }


                        }).catch(error => {
                            console.log(error)
                        })

















            },
    }
}

</script>
